
/**
 * 服务器任何地址的请求，都会重定位到 '/'上
 * 如果已经登陆过（localstorge有有效值），那么直接跳转到 '/home'
 */
import { Redirect } from 'react-router-dom'
import React, { Component } from 'react';
import ajax from '../utils/ajax.js';

import './login.css'


class Login extends Component {
    constructor(props) {
        super(props);

        let isLogin = false;
        if (localStorage.getItem('token')) {
            isLogin = true;
        }
        this.state = { isLogin: isLogin, isLoding: false };
        this.ongChange1 = this.ongChange1.bind(this);
    }

    handleOk = () => {
        var userid = this.refs.userid.value;
        var userpw = this.refs.userpw.value;
        this.setState({ isLoding: true });

        if (!userid || !userpw) {
            alert('请填写账号密码');
            this.setState({ isLoding: false });
            return;
        }

        ajax({ url: "/cch", data: { userid: userid, userpw: userpw }, method: 'post' }, function (e) {
            if (e.code) {
                localStorage.setItem('token', e.token);
                localStorage.setItem('userInfo', JSON.stringify(e.userInfo));
                this.setState({ isLogin: true });
            } else {
                alert(e.data);
                this.setState({ isLoding: false });
            }
        }.bind(this))


    }

    ongChange1 = (e) => {
        if (e.target.value.length > 0) {
            this.refs.c1.className = "fa fa-check"
        } else {
            this.refs.c1.className = "fa fa-close"
        }
    }
    ongChange2 = (e) => {
        if (e.target.value.length > 0) {
            this.refs.c2.className = "fa fa-check"
        } else {
            this.refs.c2.className = "fa fa-close"
        }
    }
    render() {

        let spin = null;
        if (this.state.isLoding)
            spin = <div className="myMask"><i className="fa fa-3x fa-spinner fa-pulse myloading"></i></div>;

        if (this.state.isLogin) {
            return (<Redirect to="/home" />)
        } else {
            return (
                <div className="full-page login-bg">

                    <div className="login-form login-form-bg">
                        <form autoComplete="off">
                            <div className="login-inputbox">
                                <label><i className="fa fa-user"></i><span className="vh">用户名</span></label>
                                <span className="long"></span>
                                <input type="text" ref="userid" onChange={this.ongChange1} />
                                <i className="fa fa-close" ref="c1"></i>
                            </div>
                            <div className="login-inputbox">
                                <label><i className="fa fa-lock"></i><span className="vh">密码</span></label>
                                <span className="long"></span>
                                <input type="password" ref="userpw" onChange={this.ongChange2} />
                                {/*<input type="text"/>*/}
                                <i className="fa fa-close" ref="c2"></i>
                            </div>

                            <div className="login-sumbit" onClick={this.handleOk}>确认</div>
                        </form>

                    </div>

                    {spin}
                </div>

            );
        }


    }
}

export default Login;
